import { useNavigate, Link } from 'react-router-dom'
import { NavBar,} from 'antd-mobile'

const Home = ()=>{
const navigate = useNavigate()


// const back = () =>{
//     navigate(-1)
// }
   

    const showDetail = () =>{
        navigate('/detail?name=xiaoming')   // 跳转到指定路由，使用query传参
    }
    const showDetail2 = () =>{
        navigate('/detail1/王某人十二点必睡觉/25') //跳转到指定路由，使用Params传参
    }
    const showDetail3 = () =>{
        navigate('/detail2',{state:{name:'朱小明',age:20}}) //跳转到指定路由，使用State传参
    }


    return(<>
     <div style={{borderBottom:'1px solid #eee'}}>
     <NavBar style={{color:'#fff', backgroundColor:'#108ee9'}} backArrow={false} >首页</NavBar>
     </div>
    <div>我！就是首页</div>
    <div>
        <Link to="/detail?name=江湖汪汪汪">进入详情</Link>
      </div>
    <button onClick={showDetail}>点我跳转到详情页1</button>
    <br />
    <button onClick={showDetail2}>点我跳转到详情页2</button>
    <br />
    <button onClick={showDetail3}>点我跳转到详情页3</button>
    </>)
}

export default Home